<template>
	<view class="collection-wrap bg-white">
		<Tabs :TabList="tabList" :currentTab="checkedTab" @tabs="tabsChange" :lineWidth="'160'">
			<TabPane>
				<view class="car-wrap" v-if="type===1">
					<view class="car-item flex-x-between" v-for="(item, index) in collectionList" :key='index'>
						<image v-if="item.image" class="img" :src="`${host}/${item.image}`"></image>
						<navigator class="info" :url="`/pages/new-car/detail/carSingle/carSingle?cid=${ item.id }&vid=${ item.vehicle_id }&yum`">
							<view class="top bold">
								{{item.carname}}
							</view>
							<view class="center text-overflow">
								{{item.name}}
							</view>
							<view class="bottom">
								<text class="label">参考价：</text>
								<text class="special-amount bold">{{item.special_price}}万起</text>
								<text class="amount line-through">{{item.fac_price}}万</text>
							</view>
						</navigator>
					</view>
					<no-data v-if="!collectionList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view class="used-car-wrap" v-if="type===2">
					<view class="used-car-item flex-x-between" v-for="(item, index) in collectionList" :key='index'>
						<image v-if="item.p_image" class="img" :src="`${qiniuhost}/${item.p_image}-t.m75xx`"></image>
						<navigator class="info" :url="`/pages/used-car/infoPage?car_id=${ item.id }`">
							<view class="sectop bold">
								{{item.carname}}
							</view>
							<view class="center">
								{{item.mileage}}万公里
							</view>
							<view class="bottom">
								<text class="amount">{{item.price}}万</text>
							</view>
						</navigator>
					</view>
					<no-data v-if="!collectionList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view class="group-wrap" v-if="type===3">
					<view class="group-item" v-for="(item, index) in collectionList" :key='index'>
						<groupTpl :groupData="item" />
					</view>
					<no-data v-if="!collectionList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view class="life-circle-wrap" v-if="type===4">
					<dynamicTpl v-for="(item, i) in collectionList" :key="i" :dynamicDate="item" @likeStateChange="handleLikeStateChange"
					 :index="i"></dynamicTpl>
					<no-data v-if="!collectionList.length" />
				</view>
			</TabPane>
			<TabPane>
				<view class="shop-wrap" v-if="type===5">
					<navigator :url="`/pages/shop/shopinfo?store_id=${item.id}&latitude=${latitude}&longitude=${longitude}`" class="shop-item flex-x-between"
					 v-for="(item, index) in collectionList" :key='index'>
						<image v-if="item.img[0]" class="img" :src="`${host}/${item.img[0]}`" mode="aspectFill"></image>
						<view class="info">
							<view class="top bold">
								{{item.title}}
							</view>
							<view class="center flex-x-between">
								<view class="left">
									<Star :score="item.xj" class="inline-block" />
									<text class="score">{{item.xj}}分</text>
									<text class="uniformity">￥{{item.uniformity}}/人</text>
								</view>
								<text class="location">
									{{item.distance}}m
								</text>
							</view>
							<view class="bottom">
								<text class="address">{{item.special_price}}</text>
							</view>
						</view>
					</navigator>
					<no-data v-if="!collectionList.length" />
				</view>
			</TabPane>
			<TabPane class="position">
				<view class="position-wrap" v-if="type===6">
					<navigator class="position-item bg-white" v-for="(item, index) in collectionList" :key='index' :url="`/pages/recruit/position-detail/index?id=${item.id}`"
					 hover-class="none">
						<view class="top bold flex-x-between">
							<text class="name">{{item.position}}</text>
							<text class="money">{{item.salary}}</text>
						</view>
						<view class="condition">
							<view class="company">{{item.title}}</view>
							<view class="tag-wrap">
								<text class="tag-item text-center">{{item.city}}</text>
								<text class="tag-item text-center">{{item.experience}}</text>
							</view>
						</view>
						<view class="hr-wrap flex-x-start">
							<image :src="item.portrait" class="avatar"></image>
							<text class="hr-name">{{item.name}}</text>
							<text>·</text>
							<text style="margin-left: 10rpx;">HR</text>
						</view>
						<view class="bottom">
							<text>{{item.time}}</text>
						</view>
					</navigator>
					<no-data v-if="!collectionList.length" />
				</view>
			</TabPane>
		</Tabs>
	</view>
</template>

<script>
	import Tabs from '../../components/public/tabs.vue'
	import TabPane from '../../components/public/tabPane.vue'
	import Star from '../../components/public/star.vue'
	import {
		getMyCollection
	} from '../../../apis/personal/index.js';
	import groupTpl from '../../components/life-circle/group-tpl.vue'
	import dynamicTpl from '../../components/life-circle/dynamic-tpl.vue'

	export default {
		data() {
			return {
				page: 1,
				checkedTab: 0,
				tabList: [{
						title: '新车',
						status: 1
					},
					{
						title: '二手车',
						status: 2
					},
					{
						title: '组局',
						status: 3
					},
					{
						title: '圈聊',
						status: 4
					},
					{
						title: '门店',
						status: 5
					},
					{
						title: '职位',
						status: 6
					}
				],
				collectionList: [],
			}
		},
		onShow() {
			this.getCollectionList()
		},
		computed: {
			latitude() {
				return uni.getStorageSync("location").latitude
			},
			longitude() {
				return uni.getStorageSync("location").longitude
			},
			host() {
				return this.$baseHost.car
			},
			qiniuhost() {
				return this.$baseHost.qiniuHost
			},
			type() {
				return this.tabList.find(item => item.status === this.checkedTab + 1).status
			},
		},
		components: {
			Star,
			Tabs,
			TabPane,
			groupTpl,
			dynamicTpl
		},
		methods: {
			tabsChange(index) {
				this.checkedTab = index
				this.getCollectionList()
			},
			getCollectionList() {

				let params = {
					page: 1,
					longitude: this.longitude,
					latitude: this.latitude,
					type: this.type,
				}
				this.$loading.show()
				getMyCollection(params).then(res => {
					if (+res.code === 200) {
						(this.type === 3) && res.data.forEach(item => item.img = item.img.split(','));
						(this.type === 5) && res.data.forEach(item => {
							item.distance = parseFloat(item.distance / 1000, 1).toFixed(1);
							item.xj = item.xj ? item.xj.toFixed(1) : 0
							item.img && (item.img = item.img.split(','))
						});

						this.collectionList = res.data;
						this.$loading.hide();
					}
				})
			},
			handleLikeStateChange(i, isLike) {
				let likeNumber = this.list[i].fabulous

				if (isLike) {
					this.list[i].dz_state = 1
					this.list[i].fabulous = likeNumber + 1
				} else {
					this.list[i].dz_state = 0
					this.list[i].fabulous = likeNumber - 1
				}
			},
		}
	}
</script>

<style lang="less">
	.collection-wrap {

		.car-wrap {
			.car-item {
				padding: 40rpx 25rpx;
				border-bottom: 1rpx solid rgba(206, 197, 197, .5);

				.img {
					width: 186rpx;
					height: 140rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.info {
					width: 490rpx;

					.top {
						font-size: 34rpx;
						margin-bottom: 15rpx;
					}
					
					.sectop {
						font-size: 32rpx;
						margin-bottom: 15rpx;
					}

					.center {
						font-size: 30rpx;
						margin-bottom: 15rpx;
					}

					.bottom {
						font-size: 26rpx;

						.label {}

						.special-amount {
							color: #E41805;
						}

						.amount {
							color: #CCCCCC;
							margin-left: 20rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.used-car-wrap {
			.used-car-item {
				padding: 40rpx 25rpx;
				border-bottom: 1rpx solid rgba(206, 197, 197, .5);

				.img {
					width: 186rpx;
					height: 140rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.info {
					width: 490rpx;

					.top {
						font-size: 34rpx;
						margin-bottom: 15rpx;
					}

					.center {
						color: #333333;
						font-size: 26rpx;
						margin-bottom: 15rpx;
					}

					.bottom {
						.amount {
							color: #E41805;
							font-size: 30rpx;
						}
					}
				}
			}
		}

		.group-wrap {
			background: #f8f8f8;

			.group-item {
				padding: 10rpx 25rpx;
			}
		}

		.life-circle-wrap {
			margin-top: 20rpx;
		}

		.shop-wrap {
			.shop-item {
				padding: 40rpx 25rpx;
				border-bottom: 1rpx solid rgba(206, 197, 197, .5);

				.img {
					width: 186rpx;
					height: 140rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.info {
					width: 490rpx;

					.top {
						font-size: 34rpx;
						margin-bottom: 15rpx;
					}

					.center {
						color: #333333;
						font-size: 26rpx;
						margin-bottom: 15rpx;

						.left {
							.score {
								color: #FCD100;
							}

							.uniformity {
								color: #333333;
								margin-left: 10rpx;
							}
						}

						.location {
							color: #656565;
						}
					}

					.bottom {
						color: #656565;
						font-size: 24rpx;
					}
				}
			}
		}

		.position {
			.tab-pane-item {
				background: #f8f8f8;
			}
		}

		.position-wrap {
			font-size: 24rpx;

			.position-item {
				line-height: 50rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;

				.top {
					.name {
						font-size: 30rpx;
					}

					.money {
						font-size: 24rpx;
						color: #E41805;
					}
				}

				.condition {
					.tag-wrap {

						.tag-item {
							font-size: 20rpx;
							padding: 5rpx 10rpx;
							background: #f8f8f8;
							margin-right: 10rpx;
							border-radius: 5rpx;
						}
					}
				}

				.hr-wrap {
					margin-top: 25rpx;
					border-bottom: 1rpx solid #efefef;
					padding-bottom: 25rpx;

					.avatar {
						width: 68rpx;
						height: 68rpx;
						border-radius: 50%;
					}

					.hr-name {
						margin: 0rpx 10rpx 0 20rpx;
					}
				}

				.bottom {
					margin: 25rpx 0rpx;
				}
			}
		}
	}
</style>
